<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <div class="fold" @click="$router.back()">
          <i class="el-icon-s-fold" />
        </div>
        <el-row justify="center">
          <el-col :span="12" :offset="6">
            <center><h3>员工导入</h3></center>
          </el-col>
        </el-row>
        <el-row>
          <el-alert type="warning" :closable="false">
            <i class="el-icon-warning" />
            <span>
              每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项</span>
          </el-alert>
        </el-row>
        <div class="import">
          <UploadExcel :on-success="handleSuccess" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils'
import { importEmployee } from '@/api/employees.js'
export default {
  name: 'Import',
  methods: {
    // 获取导入的 excel 属性
    handleSuccess({ header, results }) {
      // 处理数据
      const data = this.transExcel(results)
      // 调用接口上传
      this.doImport(data)
    },
    // 把一个对象数组中的每个对象的属性名，从中文改成英文
    // 思路：对于原数组每个对象来说
    //    （1） 找出所有的中文key
    //     (2)  得到对应的英文key
    //     (3)  拼接一个新对象： 英文key:值
    transExcel(results) {
      const mapInfo = {
        入职日期: 'timeOfEntry',
        手机号: 'mobile',
        姓名: 'username',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName',
        聘用形式: 'formOfEmployment'
      }
      return results.map(zhObj => {
        const enOBj = {}
        const zhKeys = Object.keys(zhObj) // ['姓名', '手机号']  返回一个数组

        zhKeys.forEach(zhkye => {
          const enKey = mapInfo[zhkye]
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            // 后端需要的日期格式是标准
            enOBj[enKey] = new Date(formatExcelDate(zhObj[zhkye]))
          } else {
            enOBj[enKey] = zhObj[zhkye]
          }
        })
        return enOBj
      })
    },
    // 封装把Excel数据导入浏览器函数
    async doImport(data) {
      try {
        importEmployee(data)
        this.$message.success('导入成功')
        // 回退页面
        this.$router.back()
      } catch (error) {
        this.$message.error('导入失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .el-card {
    min-height: 1155px;
    .fold {
      position: absolute;
      z-index: 999999;
      font-size: 30px;
      i {
        cursor: pointer;
        color: #4171f9;
      }
    }
    h3 {
      font-size: 22px;
    }
  }
  .import {
    margin: 100px auto 0;
  }
}
</style>
